<template>
  <div id="dplayer" @dblclick="fullScreen"></div>
</template>

<script>
import flvjs from 'flv.js'
import DPlayer from 'dplayer';

export default {
  props: {
    playerOption: Object,
  },
  data() {
    return {
      player: null,
      isFullScreen: false,
      flvPlayer: null,
    };
  },
  methods: {
    initDPlayer() {
      const options = {
        container: document.getElementById('dplayer'),
        autoplay: true,
        screenshot: true,
        hotkey: false,
        live: true,
        volume: 0,
        video: {
          url:this.playerOption.url,
          type: "customFlv",
          customType: {
            customFlv: (video, player) => {
              this.flvPlayer = flvjs.createPlayer({
                type: "flv",
                url: video.src,
              });
              this.flvPlayer.attachMediaElement(video);
              this.flvPlayer.load();
            },
          },
        }
      }
      this.player = new DPlayer(options);
    },
    fullScreen() {
      if(this.isFullScreen){
        this.player.fullScreen.cancel('browser');
        this.isFullScreen = false;
      }else{
        this.player.fullScreen.request('browser');
        this.isFullScreen = true;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initDPlayer();
    })
  },
  beforeDestroy() {
    this.flvPlayer.destroy();
    this.player.destroy();
  },
}
</script>
<style scoped>
#playercontent {
  height: 100%;
}
#dplayer /deep/ .dplayer-video-current {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
#dplayer /deep/ .dplayer-video-wrap {
  height: 100%;
}
#dplayer /deep/ .dplayer-video {
  height: 100%;
}
#dplayer{
  height: 100%;
}
</style>